import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
// 适配像素
import 'package:in_out_goods_manage/utiles/adapation.dart';
// 商品信息
import 'package:in_out_goods_manage/model/goods_manage.dart';
import 'package:provider/provider.dart';

///loading动画
import 'package:flutter_easyloading/flutter_easyloading.dart';

class GoodsAddpage extends HookWidget {
  const GoodsAddpage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    var goodsManageModel = Provider.of<GoodsManageModel>(context);
    final goodsAddFormKey = GlobalKey<FormState>();
    String? goodsNo, goodsPrice, goodsName, goodsBrand;
    var routeParams =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;

    useEffect(() {
      goodsNo = routeParams['goodsNo'];
      return null;
    }, []);
    void submitForm() {
      goodsAddFormKey.currentState?.save();
      bool? valid = goodsAddFormKey.currentState?.validate();
      if (valid == null || !valid) return;
      EasyLoading.showToast('Add success!');
      goodsManageModel.add(GoodsItem(
          goodsNo: goodsNo!,
          goodsPrice: goodsPrice!,
          goodsName: goodsName!,
          goodsBrand: goodsBrand!));
      Navigator.pop(context);
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('addManually'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Card(
              color: const Color(0xFFFFFFFF), //卡片的颜色
              elevation: 0, //阴影的大小
              shadowColor: const Color(0xFFEAEAEA), //阴影的颜色
              margin: EdgeInsets.only(top: AdaptSize.px(20)), //外边距
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(
                    AdaptSize.px(10),
                  ),
                ),
              ),
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: AdaptSize.px(14.5)),
                width: AdaptSize.px(345),
                child: Form(
                  key: goodsAddFormKey,
                  child: Column(children: [
                    TextFormField(
                      initialValue: goodsNo,
                      textAlign: TextAlign.right,
                      decoration: const InputDecoration(
                        contentPadding: EdgeInsets.symmetric(vertical: 10),
                        labelText: 'productNumber：',
                        border: InputBorder.none,
                        hintText: 'pleaseEnter',
                      ),
                      onSaved: (val) => goodsNo = val,
                      validator: (value) {
                        return validateGoods(
                            value, 'pleaseEnter productNumber');
                      },
                      autovalidateMode:
                          AutovalidateMode.onUserInteraction, //用于仅在每次用户交互
                    ),
                    const Divider(
                      height: 0,
                      color: Color(0xFFE4E4E4),
                    ),
                    TextFormField(
                      textAlign: TextAlign.end,
                      decoration: const InputDecoration(
                        contentPadding: EdgeInsets.symmetric(vertical: 10),
                        labelText: 'productTitle',
                        border: InputBorder.none,
                        hintText: 'pleaseEnter',
                      ),
                      onSaved: (val) => goodsName = val,
                      validator: (value) {
                        return validateGoods(value, 'pleaseEnter productTitle');
                      },
                      autovalidateMode:
                          AutovalidateMode.onUserInteraction, //用于仅在每次用户交互
                    ),
                    const Divider(
                      height: 0,
                      color: Color(0xFFE4E4E4),
                    ),
                    TextFormField(
                      textAlign: TextAlign.end,
                      decoration: const InputDecoration(
                        contentPadding: EdgeInsets.symmetric(vertical: 10),
                        labelText: 'productBranding',
                        border: InputBorder.none,
                        hintText: 'pleaseEnter',
                      ),
                      onSaved: (val) => goodsBrand = val,
                      validator: (value) {
                        return validateGoods(
                            value, 'pleaseEnter productBranding');
                      },
                      autovalidateMode:
                          AutovalidateMode.onUserInteraction, //用于仅在每次用户交互
                    ),
                    const Divider(
                      height: 0,
                      color: Color(0xFFE4E4E4),
                    ),
                    TextFormField(
                      textAlign: TextAlign.end,
                      decoration: const InputDecoration(
                          contentPadding: EdgeInsets.symmetric(vertical: 10),
                          border: InputBorder.none,
                          labelText: 'productPrice',
                          hintText: 'pleaseEnter',
                          isCollapsed: true),
                      onSaved: (val) => goodsPrice = val,
                      validator: (value) {
                        return validateGoods(value, 'pleaseEnter productPrice');
                      },
                      autovalidateMode:
                          AutovalidateMode.onUserInteraction, //用于仅在每次用户交互
                    ),
                  ]),
                ),
              ),
            ),
            const SizedBox(
              height: 100,
            ),
            SizedBox(
              width: AdaptSize.px(230),
              height: AdaptSize.px(30),
              child: OutlinedButton(
                style: OutlinedButton.styleFrom(
                  backgroundColor: const Color(0xFF3084FC),
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                  ),
                  side: const BorderSide(
                    color: Color(0xFF3084FC),
                  ),
                ),
                onPressed: () {
                  submitForm();
                },
                child: Text(
                  'storage',
                  style: TextStyle(
                      color: const Color(0xFFFFFFFF),
                      fontSize: AdaptSize.px(13)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  String? validateGoods(String? value, String errMsg) {
    return value!.isEmpty ? errMsg : null;
  }
}
